
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<TITLE>使用jquery.validate.js验证</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" media="screen" href="../css/validate.css" />
<script type="text/javascript" src="../js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../js/validate/jquery.validate.js"></script>
<script type="text/javascript" src="../js/validate/additional-methods.js"></script>
<script type="text/javascript" src="../js/validate/localization/messages_zh.js"></script>

<script type="text/javascript">
$(function(){
	/*
	 * jquery.validate.js 定义了验证所需的规则，从 993行开始: methods: {.......}中定义的都是验证规则，自己可以根据需要向里
	 	添加自己的规则，但不建议再这个文件里加。最好在：additional-methods.js 文件里加自己的规则，这个文件作为 jquery.validate.js
	 	的一个扩展。
	 * 验证规则名称可以参看：localization/messages_zh.js，同时这个文件也定义了验证失败时的默认信息。
	 */
	$('#myForm').validate({
		debug:true,
		rules:{
			username: {
				required: true,
				rangelength: [4,10]
			},
			password: {
				required: true,
				rangelength: [6,10]
			},
			pwd_confirm: {
				required: true,
				equalTo: "#pwd"
			},
			email: {
				email: true
			},
			gender: {
				required: function(element){ //element参数为原始dom对象，不是jquery对象
					var flag=false;
					$.each($(":radio[name='gender']"), function(i,item){
						if(item.checked==true){
							flag = true;
							return;
						}
					});
					if(flag){
						$("#genderMsg").html("");
					}else{
						$("#genderMsg").html("请选择性别！");
						$("#genderMsg").addClass("error");
					}
				}
			}
		},
		messages: {
			username: {
				required: "用户名不能为空！"
			},
			password: {
				required: "密码不能为空！",
				rangelength: $.validator.format("密码长度必须在{0}和 {1}个字符串之间！")
			},
			pwd_confirm: {
				required: "确认密码不能为空！",
				equalTo: "两次密码输入不一致！"
			},
			gender: {
				required: ""
			}
		}
	});
});
</script>
<style type="text/css">
.input-label{
	text-align: right;
}
</style>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

	<form  action="user!regist.action" method="post" id="myForm">
		<table align="center">
			<tr>
				<td>用户注册：</td>
				<td>使用jquery.validate验证</td>
			</tr>
			<tr>
				<td colspan="2"><hr/></td>
			</tr>
			<tr>
				<td class="input-label">用户名：</td>
				<td><input id="uname" type="text" name="username" ><span style='color:red;'>*</span></td>
			</tr>
			<tr>
				<td class="input-label">密码：</td>
				<td><input id="pwd" type="password" name="password"><span style='color:red;'>*</span></td>
			</tr>
			<tr class="control-group">
				<td class="input-label">重复密码：</td>
				<td><input id="psw2" type="password" name="pwd_confirm"><span style='color:red;'>*</span></td>
			</tr>
			<tr>
				<td class="input-label">邮箱地址：</td>
				<td><input id="email" type="text" name="email"></td>
			</tr>
			<tr>
				<td>联系电话：</td>
				<td><input id="tel" type="text" name="tel"></td>
			</tr>
			<tr>
				<td class="input-label">时间：</td>
				<td><input type="text" name="theTime"></td>
			</tr>
			<tr>
				<td class="input-label">性别：</td>
				<td >
					<input type="radio" name="gender">男&nbsp;
					<input type="radio" name="gender">女   
					<label id="genderMsg"></label>
				</td>
			</tr>
			
			<tr>
				<td><input id="regbut" type="submit" value="注册"  class="btn">&nbsp;</td>
				<td><input id="reset" type="reset" value="重置" class="btn"></td>
			</tr>
		</table>
	</form>
	
</BODY>
</HTML>